<template>
	<ComPop v-model="show" width="32%" title="图片预览" :footer="false">
		<el-image :src="links" class="img" v-if="type === 1" />
		<template v-else>
			<div class="cards" v-for="item in urls" :key="item.title">
				<div class="title">{{ item.title }}：</div>
				<el-image :src="item.url" class="img" />
			</div>
		</template>
	</ComPop>
</template>

<script setup>
const show = ref(false);
const links = ref('');
const type = ref(1);
const urls = ref([]);
const open = (url) => {
	type.value = 1;
	links.value = url;
	show.value = true;
};
const open2 = (arr) => {
	type.value = 2;
	urls.value = arr;
	show.value = true;
};
defineExpose({ open, open2 });
</script>

<style lang="scss" scoped>
.cards {
	display: flex;
	margin-bottom: 20px;
}
.img {
	margin: 0 auto;
	width: 300px;
	height: 400px;
}
</style>
